<template>
</template>

<script>
</script>

<style>
</style>
<!--  -->
<template>

<div id="main">

      <div id="form">

        <div id="img" style="text-align: center;">
          <img src="../../assets/images/bcu.jpg" />
        </div>

        <h2 style="text-align: center; margin-top: 30px; margin-bottom: 30px;">北京城市学院校园岗位内推申报表</h2>

         <el-form :model="job" :rules="rules">


           <el-form-item label="岗位名称" :label-width="formLabelWidth" prop='jobName'>
             <el-input v-model="job.jobName" autocomplete="off" maxlength="20" show-word-limit :readonly="readonly"></el-input>
           </el-form-item>

            <el-form-item label="工作环境轮播图" :label-width="formLabelWidth" prop='jobEnviromentImg'>
              <el-upload
                :action= 'url'
                list-type="picture-card"
                :on-success="handleContentSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="contentFileList"
                >

                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="contentVisible">
                <img width="100%" :src="contentImageUrl" alt="">
              </el-dialog>
            </el-form-item>

            <el-form-item label="工作地点" :label-width="formLabelWidth" prop='jobAddress' >
              <el-input v-model="job.jobAddress" autocomplete="off" :readonly="readonly" placeholder="请详细描述工作地点" width="100px"></el-input>

            </el-form-item>

            <el-form-item label="岗位公司" :label-width="formLabelWidth" prop='jobCompany'>
              <el-input v-model="job.jobCompany" autocomplete="off" :readonly="readonly" width="100px"></el-input>
            </el-form-item>

            <el-form-item label="职位详情" :label-width="formLabelWidth" prop='jobDetail'>
              <el-input v-model="job.jobDetail" autocomplete="off" :readonly="readonly"></el-input>
            </el-form-item>

            <el-form-item label="学历要求" :label-width="formLabelWidth" prop='jobEducation'>
              <el-input v-model="job.jobEducation" autocomplete="off" :readonly="readonly" ></el-input>
            </el-form-item>

            <el-form-item label="工作经验" :label-width="formLabelWidth" prop='jobExperience'>
              <el-input v-model="job.jobExperience" autocomplete="off" :readonly="readonly"></el-input>
            </el-form-item>

            <el-form-item label="学部编号" :label-width="formLabelWidth" prop='jobPartId'>
              <el-input v-model="job.jobPartId" autocomplete="off" :readonly="readonly"></el-input>
            </el-form-item>

            <el-form-item label="岗位薪资" :label-width="formLabelWidth" prop='jobSalary'>
              <el-input v-model="job.jobSalary" autocomplete="off" :readonly="readonly"></el-input>
            </el-form-item>

            <el-form-item label="岗位类型" :label-width="formLabelWidth" prop='jobType'>
              <el-select v-model="job.jobType" placeholder="请选择岗位类型">
               <el-option
                  label="学部可见"
                  value="1">
                </el-option>
              <el-option
                label="全部可见"
                value="2">
              </el-option>
               </el-select>
              <!--<el-input v-model="job.jobType" autocomplete="off" :readonly="readonly" placeholder=""></el-input>-->
            </el-form-item>

            <el-form-item label="推荐人编号" :label-width="formLabelWidth" prop='jobUserId'>
              <el-input v-model="job.jobUserId" autocomplete="off" :readonly="readonly" placeholder="请输入推荐人编号"></el-input>
            </el-form-item>
             
            <el-form-item label="推荐人姓名" :label-width="formLabelWidth" prop='jobUserName'>
              <el-input v-model="job.jobUserName" autocomplete="off" :readonly="readonly" placeholder="请输入推荐人姓名"></el-input>
            </el-form-item>
             
            <el-form-item label="推荐人邮箱" :label-width="formLabelWidth" prop='jobUserEmail'>
              <el-input v-model="job.jobUserEmail" autocomplete="off" :readonly="readonly" placeholder="请输入推荐人邮箱"></el-input>
            </el-form-item>

            <el-form-item label="推荐人电话" :label-width="formLabelWidth" prop='jobUserPhone'>
              <el-input v-model="job.jobUserPhone" autocomplete="off" :readonly="readonly" placeholder="请输入推荐人电话"></el-input>
            </el-form-item>

         </el-form>
         <div id="buttons">
           <!-- <el-button @click="dialogFormVisible = false">关 闭</el-button> -->
           <el-button type="primary" @click="handleSubmit" v-show="!readonly" :loading="loading">送 审</el-button>
         </div>

     </div>

     <div id="empty" style="margin-bottom: 30px;"></div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {getUserInfoByToken} from '../../api/userInfo.js'
import {createJob} from '../../api/job.js'
  export default {
     name:'',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        readonly:false,
        url:process.env.VUE_APP_BASE_API+"file/",
        loading: false,
        dialogFormVisible: true,
        formLabelWidth: '100px',
        title: '北京城市学院校园岗位内推申报单',
        contentImageUrl: '',
        titleImageUrl:'',
        contentVisible: false,
        titleFileList:[],
        contentFileList:[],
        userInfo:{},
        job:{
          jobId: '',
          jobPartId: '',
          jobUserId: '',
          jobName: '',
          jobCompany: '',
          jobSalary: '',
          jobAddress: '',
          jobExperience: '',
          jobEducation: '',
          jobDetail: '',
          jobEnviromentImg: '',
          jobUserName: '',
          jobUserPhone: '',
          jobUserEmail: '',
          jobType: '',
          jobStatus: 1
        },
        rules:{}
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      fetchData(userId) {
        this.loading = true
        getUserInfoById(userId).then((data) => {
          this.user = data.obj
          this.loading = false
          this.dialogFormVisible = true
        })
      },
      handleRemove(file, fileList) {
         this.contentFileList=fileList
         let list=fileList.map((item)=>{return item.response.obj})
         this.job.jobEnviromentImg=list.join("")
         console.log(this.job.jobEnviromentImg)
      },
      handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
      },
      
      handleContentSuccess(res,file,fileList){
        console.log(res)
        if(res.result===true)
        {
          this.$notify({
            title: '成功',
            message: '图片上传成功',
            type: 'success'
          });
           this.job.jobEnviromentImg+=res.obj
           this.contentFileList=fileList
        }else{
          this.$notify({
            title: '成功',
            message: '图片上传失败',
            type: 'error'
          });

        }


      },
      handleSubmit(){
        console.log(1111)
        // this.act.validate().then(()=>{
          getUserInfoByToken().then((resp)=>{
            this.userInfo=resp.obj
            this.$confirm(`请确认申报人信息是否正确\n申报人姓名：${this.userInfo.userName}\n申报人电话：${this.userInfo.userPhone}\n申报人邮箱：${this.userInfo.userEmail}\n`).then(()=>{
              //this.job.jobUserName=this.userInfo.userName
              //this.job.jobUserPhone=this.userInfo.userPhone
              //this.job.jobUserEmail=this.userInfo.userEmail
              console.log('岗位提交')
              console.log(this.job)
              this.loading=true
              createJob(this.job).then(()=>{
                this.job={}
                this.contentImageUrl= ''
                this.titleImageUrl=''
                this.titleFileList=[]
                this.contentFileList=[]
                this.loading=false
                this.dialogVisible=false
                // this.$message('活动送审成功，审核通过后，您将收到邮件通知')
                this.$alert('岗位送审成功，审核通过后，您将收到邮件通知', '送审成功', {
                          confirmButtonText: '确定'
                          }
                        );
              }).catch((resp)=>{
                this.loading=false
                this.$notify({
                  title: '系统繁忙',
                  message: resp.msg,
                  type: 'error'
                });
              })
            })
          })
        // })
      },
      beforeAvatarUpload(){},

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
  #main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 50px auto;

    width: 900px;

  }
  #buttons{
    text-align: center;
  }

  #step{
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
  }


  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
